<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta content="telephone=no" name="format-detection" />
    <meta name="full-screen" content="true"/>
    <meta name="screen-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="360-fullscreen" content="true"/>
    <title>屈臣氏杨洋见面会直播</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="dist/jquery.danmu.js"></script>
    <link rel="stylesheet" href="/css/bootstrap-switch.min.css">
    <script src="/js/bootstrap-switch.min.js"></script>
    <style type="text/css">
        body{background: #000 url(/images/live-bg.png) no-repeat; background-size: 100% auto;}
        #danmu{z-index: 3;pointer-events: none;}
        #danmu-bg{z-index: 2; position: fixed; left: 0; top: 0; bottom: 45px; right: 0;pointer-events: none;}
        #VRPlayer {position: absolute;width:100%;height:100%;top:0;left:0;border:none;z-index: -1;}
        .header{margin-top: 15px;z-index: 2;}
        .zhibo{font-size: 0.8em; color: #fff; margin: 0;}
        #notice{position: fixed;bottom: 30%;left: 15px; width: 60%;}
        #toolbar{position: fixed; bottom: 45px; left: 15px; right: 15px; z-index: 99;}
        #btn-comment,
        #btn-like{width: 10%;height: auto; max-width: 10%;}
        #like-box{width: 10%;max-width: 10%; position: absolute; right: 3px; bottom: 30px;}
        #like-count{width: 30px; height: 30px;font-size: 1.2em; color:#009e96;text-align: center;line-height: 30px;display: none;}
        #like-heart{position: relative}
        #like-heart img{position: absolute}
        #danmu-box{padding: 0 5px; width: 60%}
        #danmu-switch-box{float: left; margin-top: 2px;}
        #danmu-send-box{width: 20%;max-width: 20%;}
        #toolbar-danmu{display: none;}
    </style>
</head>
<body>

<div class="container-fluid">
    <div class="row header">
        <div class="col-xs-5">
            <img src="/images/logo.png" alt="屈臣氏" class="img-responsive">
        </div>
        <div class="col-xs-5">
            <p class="zhibo"><span style="color: #88df00;">●</span> 直播中</p>
            <p class="zhibo"><span id="audience"></span> 观众</p>
        </div>
    </div>
</div>

<div id="notice">
    <img src="/images/notice.png" class="img-responsive" alt="系统提示：快来截屏收集杨洋表情吧！">
</div>

<div id="toolbar">
    <div id="toolbar-option">
        <!--评论按钮-->
        <img src="/images/comment.png" class="pull-left" id="btn-comment">

        <!--点赞按钮-->
        <img src="/images/like.png" class="pull-right" id="btn-like">
        <div id="like-box">
            <div class="hide" id="heart-box">
                <img src="/images/like_1.png">
                <img src="/images/like_2.png">
                <img src="/images/like_3.png">
                <img src="/images/like_4.png">
            </div>

            <div id="like-heart">
            </div>
            <div id="like-count">+<span id="like-count-num">0</span></div>
        </div>
    </div>

    <div id="toolbar-danmu">
        <!--弹幕开关-->
        <div id="danmu-switch-box">
            <input id="btn-danmu-switch" type="checkbox" checked data-on-text="弹" data-off-text="关" data-size="small" data-handle-width="5" data-label-width="5">
        </div>

        <!--弹幕内容-->
        <div class="pull-left" id="danmu-box">
            <input class="form-control" id="ipt-danmu" type="text" placeholder="输入你想对杨洋说的话..." maxlength="30">
        </div>

        <!--发送-->
        <div class="pull-right" id="danmu-send-box">
            <button type="button" class="btn btn-default btn-block" id="btn-submit">发送</button>
        </div>
    </div>

</div>

<!--弹幕盒子-->
<div id="danmu"></div>
<div id="danmu-bg"></div>
<iframe id="VRPlayer" src="http://playhls.moredoo.com/moredooplayer/release_1.54/index.html?watch=http://moredoo.com/watch/650738"></iframe>
<script src="http://playhls.moredoo.com/moredooplayer/release_1.54/core/gyrofix.js" type="text/javascript"></script>

<script type="text/javascript">

    function isWeixn() {
        var ua = navigator.userAgent.toLowerCase();
        return ua.match(/MicroMessenger/i) == "micromessenger";
    }

    function getParam(val) {
        var str = window.location.href.split("?");
        if (str.length > 1) {
            var arrBuf = str[1].split("&");
            for (var i = 0; i < arrBuf.length; i++) {
                var arrTmp = arrBuf[i].split("=");
                if (arrTmp[0] === val) {
                    return arrTmp[1];
                }
            }
        }
    }

    function randColor() {
        return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);
    }

    var player = getParam('p') || 1;
    if (player == 2 && !isWeixn()) {
        alert('小屈提示你近景vip直播必须在屈臣氏公共号看');
        $('body').html('');
    }

    var websocket = {
        ws: null,
        connection: function() {
            var ws = new WebSocket('ws://' + location.hostname + ':8088'),
                    self = this;
            ws.onopen = function () {
                console.log("握手成功");
            };
            ws.onmessage = function (e) {
                var time = jQuery('#danmu').data("nowtime") + 1,
                        fontSize = 20,
                        defaultTop = 60,
                        msg = e.data,
                        color = '#f0f0f0',
                        top = [defaultTop, defaultTop + fontSize, defaultTop + fontSize * 2][parseInt(Math.random() * 3)],
                        bottom = 'auto';

                if (isMember) {
                    color = randColor();
                    top = 'auto';
                    defaultTop = 60;
                    bottom = [defaultTop, defaultTop + fontSize][parseInt(Math.random() * 2)];
                }

                var danmu = {
                    text: msg,
                    color: color,
                    font_size: 20,
                    position: 0,
                    time: time,
                    top: top,
                    bottom: bottom,
                    isnew: ''
                };

                jQuery('#danmu').danmu("add_danmu", danmu);    //向插件中添加该danmu对象
            };
            ws.onerror = function () {
                self.reconnection();
            };
            ws.onclose = function() {
                self.reconnection();
            };

            this.ws = ws;
        },
        reconnection: function() {
            var self = this;
            if (this.ws && this.ws.readyState == 1) {
                this.ws.close();
            }

            this.ws = null;
            setTimeout(function() {
                if (typeof self.ws != 'object') {
                    console.log('reconnection');
                    self.connection();
                }
            }, 500);
        },
        send: function(val) {
            if (this.ws && this.ws.readyState == 1) {
                this.ws.send(val);
            }
        }
    };

    var card = getParam('card'),
            $btnComment = $('#btn-comment'),
            $iptDanmu = $('#ipt-danmu'),
            $toolbarDanmu = $('#toolbar-danmu'),
            $toolbarOption = $('#toolbar-option'),
            $btnLike = $('#btn-like'),
            $likeCount = $('#like-count'),
            $likeCountNum = $('#like-count-num'),
            $hearts = $('#heart-box').find('img'),
            $likeHeart = $('#like-heart'),
            clickLikeTime = 0,
            isMember = false;

    $(document).ready(function () {
        $("#danmu").danmu({
            bottom: 45,
            zindex: 100, //div的css样式zindex
            speed: 20000, //弹幕速度，飞过区域的毫秒数
            sumtime: 50000, //弹幕运行总时间
            danmuss: {}, //danmuss对象，运行时的弹幕内容
            default_font_color: "#FFFFFF", //弹幕默认字体颜色
            font_size_small: 16, //小号弹幕的字体大小,注意此属性值只能是整数
            font_size_big: 60, //大号弹幕的字体大小
            top_botton_danmu_time: 6000 //顶端底端弹幕持续时间
        });
        $('#danmu').danmu('danmu_start');

//        websocket.connection();

        $('#btn-submit').click(function() {
            websocket.send($iptDanmu.val());
            $iptDanmu.val('');

            $toolbarDanmu.hide();
            $toolbarOption.show();

            return false;
        });

        $btnComment.click(function(e) {
            $toolbarDanmu.show();
            $toolbarOption.hide();
            $iptDanmu.focus();
        });

        // 弹幕开关
        $("#btn-danmu-switch").bootstrapSwitch()
                .on('switchChange.bootstrapSwitch', function(e, state) {
                    if (state) {
                        $('#danmu').show();
                    } else {
                        $('#danmu').hide();
                    }
                });

        $('#danmu').hide();
        $('#danmu-bg').hide();

        // 判断弹幕输入框隐藏
        $(window).click(function(event) {
            if ($(event.target).attr('id') != 'btn-comment' && $(event.target).parents('#toolbar-danmu').length == 0) {
                $toolbarDanmu.hide();
                $toolbarOption.show();
            }
        });

        // 在线人数
        $.post('/api/audience', {card: card}, function(resp) {
            $('#audience').html(1051354);
            return;
            if (resp.code == 0) {
                var data = resp.data;
                $('#audience').html(1051354);

                // 若后台配置直播为关闭，则将直播组件关闭
                if (!data.liveSwitch) {
                    $('#VRPlayer').hide();
                }

                isMember = data.isMember || false;
            }
        });

    });

    // 连续点赞
    var btnLickClick = function() {
        clickLikeTime = Date.parse(new Date());

        $likeCount.fadeIn(300, function() {
            $likeCount.fadeOut(600);
        });

        var $heart = $hearts.eq(parseInt(Math.random() * $hearts.length)).clone(),
            count = parseInt($likeCountNum.html()) + 1,
            initSize = 15 + count,
            opacity = 0.8 + (parseInt(count / 4) / 100);

        if (initSize > 35) {
            initSize = 35;
        }

        $likeCountNum.html(count);

        $heart.css({
            width: initSize + 'px',
            height: initSize + 'px',
            opacity: opacity,
            bottom: parseInt(Math.random() * 20),
            left: parseInt(Math.random() * 10)
        }).animate({
            bottom: '+=100px',
            opacity: '0.5',
            height: '8px',
            width: '8px',
            right: parseInt(Math.random() * 10)
        }, 3000, function() {
            $(this).remove();
        });
        $likeHeart.append($heart);
    };
    $btnLike.on('touchstart', function(e) {
        btnLickClick();
    });

    // 连续点赞结束
    setInterval(function() {
        if (Math.abs(Date.parse(new Date()) - clickLikeTime) > 1000 && clickLikeTime != 0) {
            clickLikeTime = 0;
            $.post('/api/like', {count: $likeCountNum.html()});
            $likeCountNum.html(0);
        }
    }, 100);
</script>
<div style="display:none;"><script type="text/javascript" src="//s.union.360.cn/73841.js"></script></div>
</body>
</html>